<template>
  <view>
    <view class="list-wrap" v-if="coursewareList.length > 0">
      <view class="list-item-wrap" v-for="item in coursewareList" :key="item.coursewareId" @click="toStudyPage(item)">
        <u--image
          v-if="item.fileType !== '1'"
          src="/static/images/study-garden/pdf-icon.png"
          width="174rpx"
          height="150rpx"
        ></u--image>
        <u--image v-else src="/static/images/study-garden/video-icon.png" width="174rpx" height="150rpx"></u--image>
        <view class="content">
          <view class="title u-line-2">{{ item.coursewareName || '--' }}</view>
        </view>
      </view>
    </view>

    <CuEmpty v-else></CuEmpty>
  </view>
</template>

<script>
import { getCoursewareLog } from '@/api/studyGarden/index.js'
import CuEmpty from '@/components/cu-empty/index.vue'
export default {
  components: {
    CuEmpty
  },
  data() {
    return {
      coursewareList: []
    }
  },
  onShow() {
    this.getCoursewareLog()
  },
  onPullDownRefresh() {
    this.getCoursewareLog()
  },
  methods: {
    getCoursewareLog() {
      getCoursewareLog()
        .then((res) => {
          this.coursewareList = res.data || []
        })
        .finally(() => {
          uni.stopPullDownRefresh()
        })
    },
    toStudyPage(item) {
      if (item.fileType === '1') {
        uni.navigateTo({
          url: `/pages/studyGarden/studyPage/studyVideo?id=${item.coursewareId}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/studyGarden/studyPage/studyPdf?id=${item.coursewareId}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-wrap {
  padding: 30rpx 30rpx 100rpx 30rpx;

  .list-item-wrap {
    display: flex;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .content {
      margin-left: 20rpx;
      padding-top: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 30rpx;
        color: #333333;
      }

      .views {
        font-size: 24rpx;
        color: #bbbbbb;
      }
    }
  }
}
</style>
